<template>
  <div class="wrapper">
    <dx-header-bar title="工单信息"></dx-header-bar>
    <dx-e-chart class="chart" ref="chartCpt"
                :color="['#16c6cb', '#b8a7e0']"
                :show-legend="true"
                :x-axis-data="chartXAxisData"
                :series="chartSeries">
    </dx-e-chart>
    <div class="content-wrapper">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
          <th width="40%">工单类型</th>
          <th width="30%">在途</th>
          <th width="30%">历史</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>
            {{item.name}}
          </td>
          <td :class="{'is-link': item.deal > 0}">
            {{item.deal}}
          </td>
          <td :class="{'is-link': item.history > 0}">
            {{item.history}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar, DxEChart } from '@/components';
import { getOrderStatistics } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxEChart
  },
  data() {
    return {
      customerCode: this.$route.query.customerCode,
      dataList: [
        { key: 'KC', name: '勘查工单', deal: 0, history: 0 },
        { key: 'OPEN', name: '开通工单', deal: 0, history: 0 },
        { key: 'COM', name: '投诉工单', deal: 0, history: 0 },
        { key: 'ALARM', name: '故障工单', deal: 0, history: 0 }
      ],
      chartXAxisData: [],
      chartSeries: []
    };
  },
  mounted() {
    this.loadOrderStatistics();
  },
  methods: {
    loadOrderStatistics() {
      this.$refs.chartCpt.showLoading();
      getOrderStatistics(this.customerCode).then(result => {
        const data = result.data[0];
        const xAxisData = [];
        const seriesData0 = [];
        const seriesData1 = [];
        this.dataList = this.dataList.map(e => {
          e.deal = data[`${e.key}_DEALING`];
          e.history = data[`${e.key}_DEALED`];
          xAxisData.push(e.name);
          seriesData0.push(e.deal);
          seriesData1.push(e.history);
          return e;
        });
        this.chartXAxisData = [xAxisData];
        this.chartSeries = [
          {
            name: '在途',
            type: 'bar',
            data: seriesData0,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          },
          {
            name:
              '历史',
            type: 'bar',
            data: seriesData1,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          }
        ];
        this.$nextTick(() => {
          this.$refs.chartCpt.updateChart();
        });
      }).catch(() => {
        this.$refs.chartCpt.hideLoading();
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .content-wrapper
    flex : 1
    font-size : 28px

  .chart
    height : 400px
    width : 100%

  table
    line-height : 80px
    background : #fff
    text-align : center

  th, td
    border-bottom : 1px solid #eee
    border-right : 1px solid #eee
    &:last-of-type
      border-right : none
    &.is-link
      color : theme-color

  thead
    tr
      background : #f5f9fe

  tbody
    tr:nth-of-type(odd)
      background : #fff
    tr:nth-of-type(even)
      background : #f9f9f9
</style>
